<template>
  <div class="large_screen_2" :class="[`${prefixCls}--box`]">
    <div class="full-screen-box">
      <div class="large-grid-box">
        <div class="g-header">
          <span class="header-img">
            <img src="/@/assets/images/screen/title.png" alt="" />
          </span>
          <div class="header-right">
            <span class="timer">{{ date.time }}</span>
            <span class="date">{{ date.date }}</span>
            &emsp;
            <!-- <a-button class="large-full-button" type="primary" @click="toggle" v-text="isFullscreen ? '退出全屏' : '全屏'" size="mini"></a-button> -->
          </div>
        </div>
        <transition name="fade">
          <div class="g-center" v-if="mapType == '1'">
            <div class="center-left">
              <Left />
            </div>
            <div class="center-center">
              <MapCenter />
              <!-- <ScreenMap ref="mapDom" style="position: absolute; z-index: 0; top: 0; left: 2.6%; right: 2.6%; bottom: 0" /> -->
            </div>
            <div class="center-right">
              <Right />
            </div>
          </div>
          <div class="g-center g-center-tow" v-else>
            <img src="../../assets/images/screen/ljdp.png" alt="" style="display: block; height: 100%; margin: 0 auto" />
          </div>
        </transition>
        <div class="g-footer">
          <div :class="['footer-item', mapType == '1' && 'action-footer']">
            <span :class="['footer-btn', mapType == '1' && 'action-btn']" @click="handleMapType('1')">
              业务大屏
              <!-- <CaretRightOutlined class="btn-icon" />业务大屏
            <CaretLeftOutlined class="btn-icon" /> -->
            </span>
          </div>
          <div :class="['footer-item', mapType == '2' && 'action-footer']">
            <span :class="['footer-btn', mapType == '2' && 'action-btn']" @click="handleMapType('2')">
              逻辑大屏
              <!-- <CaretRightOutlined class="btn-icon" />逻辑大屏
            <CaretLeftOutlined class="btn-icon" /> -->
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="largeScreen" setup>
  import { useDesign } from '/@/hooks/web/useDesign';
  import { ref, onBeforeUnmount, onMounted, provide, nextTick } from 'vue';
  import { getCurrentData } from '/@/utils/dateUtil';
  import Left from './components/Left.vue';
  import Right from './components/Right.vue';
  import MapCenter from './components/Center.vue';
  // import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons-vue';
  // import footer1 from '@/assets/images/screen/footer-1.png';
  // import footer2 from '@/assets/images/screen/footer-2.png';

  //#region 公用部分 所搜查询处理  模拟数据动态
  const { prefixCls } = useDesign('screen');
  provide('prefixCls', prefixCls);

  const mapType = ref('1'); //1 地图模式  2 流程图
  const dataListLoading = ref(false);
  const mapOneData = ref({
    val1: 1,
    val2: 2,
    val3: 3,
    val4: 4,
    val5: 5,
    val6: 6,
    val7: 7,
    val8: 9,
    val9: 9,
    val10: 10,
    val11: 11,
    val12: 12,
    val13: 13,
    val14: 14,
    val15: 15,
  }); //流程模式中间统计数据
  const timerDate = ref();
  const date = ref({
    date: '',
    week: '',
    time: '',
  });

  // 获取数据
  function getDataList() {
    dataListLoading.value = true;
    for (let i in mapOneData.value) {
      mapOneData.value[i] += 1;
    }
    dataListLoading.value = false;
  }
  //切换模式
  function handleMapType(type) {
    mapType.value = type;
  }
  function getTime() {
    date.value = getCurrentData();
    timerDate.value && clearInterval(timerDate.value);
    timerDate.value = setInterval(() => {
      date.value = getCurrentData();
    }, 1000);
  }
  onMounted(() => {
    getTime();
  });
  onBeforeUnmount(() => {
    timerDate.value && clearInterval(timerDate.value);
    timerDate.value = null;
  });
  //#endregion
</script>

<style lang="less">
  @import './index.less';
  .large_screen_2 {
    line-height: 1;
    font-size: 14px;

    .font-size16 {
      font-size: 16px;
    }
    .font-size13 {
      font-size: 13px;
    }
    .font-size14 {
      font-size: 14px;
    }
    .font-size15 {
      font-size: 15px;
    }
    .font-size18 {
      font-size: 18px;
    }
    .font-size20 {
      font-size: 20px;
    }
    .font-size12 {
      font-size: 12px;
    }
    .color-fff {
      color: #fff;
    }
    .color-base {
      color: rgba(255, 255, 255, 0.5);
    }
    .font-size24 {
      font-size: 24px;
    }
    .side-chart-style {
      height: calc(100% - 29px);
    }
    .margin-bottom8 {
      margin-bottom: 8px;
    }
    .margin-bottom5 {
      margin-bottom: 5px;
    }
    .margin-bottom10 {
      margin-bottom: 10px;
    }
    .margin-right-15 {
      margin-right: 15px;
    }
    .margin-right-10 {
      margin-right: 10px;
    }
    .margin-right-20 {
      margin-right: 20px;
    }
    .pointer {
      cursor: pointer;
    }
    .align-center {
      text-align: center;
      align-items: center;
    }
    .margin-right4 {
      margin-right: 4px;
    }
    .margin-left4 {
      margin-left: 4px;
    }
    .flex-1 {
      flex: 1;
    }
    .display-flex {
      display: flex;
    }
    .felx-column {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .no-warp {
      white-space: nowrap;
      overflow: hidden;
    }
  }
  .scroll-dialog {
    overflow: hidden !important;
  }
  .space-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>
<style scoped lang="less">
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>
